<!doctype html>
<html>
<head>
 <title>HTML5-now: input element</title>
 <script src="../base2-legacy.js"></script><!-- support really old browsers -->
 <script src="../html5-now.js"></script>
 <script src="colorizer.js"></script>
 <link rel="stylesheet" type="text/css" href="examples.css">
</head>
<body>
 <h1>HTML5-now: <code>input</code> element</h1>

<form action="http://software.hixie.ch/utilities/cgi/test-tools/echo" method="post" enctype="multipart/form-data">

 <p>Here is a <b>select</b> element for comparison: <select name="select1">
  <option>Baroness
  <option>Dr
  <option>Herr
  <option>Frau
  <option>Lady
  <option>Lord
  <option>Miss
  <option>Mr
  <option>Mrs
  <option>Prof
  <option>Rt Hon
  <option>Sir
  <option>Viscount
 </select></p>

 <p>Pick a <b>number</b>: <input name="number1" type="number" value="" required> <sup>required</sup></p>

 <p>Pick a <b>date</b>: <input name="date1" type="date" class="date-of-birth" value="2008-11-15" min="2008-11-15" max="2009-11-15"></p>

 <p>Pick a <b>time</b>: <input name="time1" type="time" value="13:45"></p>

 <p>Pick a <b>month</b>: <input name="month1" type="month" value="2008-08"></p>

 <p>Pick a <b>week</b>: <input name="week1" type="week" value="2008-W40"></p>

 <p>Pick a <b>color</b>: <input name="color1" type="color" value="#000000"></p>

 <p>Pick from a <b>range</b>: <input name="range1" type="range" value="33"></p>

 <p>Pick from a <b>list</b>: <input name="list1" type="text" value="" list="titles" size="4"> <datalist id="titles"><select>
  <option>Baroness
  <option>Dr
  <option>Herr
  <option>Frau
  <option>Lady
  <option>Lord
  <option>Miss
  <option>Mr
  <option>Mrs
  <option>Prof
  <option>Rt Hon
  <option>Sir
  <option>Viscount
 </select></datalist></p>

 <p><button type="submit">Submit</button></p>
</form>
</body>
</html>